<template>
	<loading v-if="0 != loading" :status="loading" />
	<view v-else class="main-view">
		<block v-if="listData && listData.length > 0">
			<navigator v-for="(item, index) in listData" class="list-item" 
				:url="item.exchangeId ? (item.pzUrl ? '/pages/outlink/outlink?outlink=' + item.pzUrl + '#/groupBuy' : '/subPackages/pointMallPkg/pages/pointToGoodsDetail/pointToGoodsDetail?exchangeId=' + item.exchangeId) : '/subPackages/mall/pages/goods/goods?goodsId=' + item.id"
				hover-class="none"  :key="index">
				<image :src="util.attachedUrl(item.goodsImages,baseImgUrl)" class="goods-image"></image>
				<view class="item-goods-info">
					<view class="goods-name">{{item.goodsName}}</view>
					<view class="goods-line">
						<view class="goods-price" v-if="item.needPointsMin || item.needPointsMax">
							<text v-if="item.needPointsMax == item.needPointsMin">{{item.needPointsMax}}<text class="pointText">积分</text></text>
							<text v-else>{{`${item.needPointsMin} ~ ${item.needPointsMax}`}}<text class="pointText">积分</text></text>
							<block v-if="item.exchangeType && item.exchangeType == '2'">
								<!--  && item.exchangePrice -->
								<text class="pointText"> + <text class="goods-price"> ¥{{ item.exchangePrice || '0' }}</text></text>
							</block>
							
						</view>
						<view class="goods-price" v-else-if="item.hasDisPrice">¥{{item.disPrice}}</view>
						<view class="goods-price" v-else>¥{{item.goodsMinPrice}}</view>
						<view class="buy-btn">{{ item.exchangeType && item.exchangeType == '1' ? '立即兑换' : '立即购买' }}</view>
					</view>					
				</view>		
			</navigator>
		</block>
		
	</view>
</template>
<script module="util" lang="wxs" src="../../utils/util.wxs"></script>
<script>
	import loading from '@/components/loading/loading';
	import {
		baseImgUrl,
		baseUrl
	} from '../../utils/constant.js'
	import {
		http
	} from '@/utils/commonRequest.js'; // 局部引入
	const util = require('../../utils/util.js');


	export default {
		components: {
			loading
		},
		data() {
			return {		
				baseImgUrl: baseImgUrl,
				baseUrl: baseUrl,
				loading: 1, // 1加载中,0加载成功,-1加载失败
				id: '',
				page: 1,
				listData: [],
				haveMore: true //是否还有更多数据加载
			}
		},
		onLoad(options) {
			let id = options && options.id;
			this.id = id;
			if(options && options.tagName){
				uni.setNavigationBarTitle({
					title: options.tagName
				});
			}
			this.$checkLogin().then(res => {
				this.loadData();
			})
		},
		onReachBottom: function() {
			if (!this.haveMore) {
			 	return;
			}
			this.page++;
			this.loadData();
		},
		methods: {
			loadData: function() {
				let that = this;
				let params = {
					tagId: this.id,
					page: this.page,
					limit: '10'
				}
				http.get('/mtBank/queryTagIdByGoods', {params: params})
				.then((res) => {
					res = res.data
					if ('200' == res.code) {
						that.loading = 0;
						let list = res.page.list;
						that.haveMore = res.page.hasNextPage;
						that.listData = [...that.listData, ...list];						
						console.log('-----都在兑--二级',res)
					}
				})
				.catch((err) => {
					this.loading = -1
					console.log('err===',err);
				});
			},

		}
	}
</script>

<style>
	.main-view{
		padding: 24rpx;
	}
	
	.pointText{
		font-size: 24rpx;
		font-weight: 500;
	}

	.list-item{
		width: 100%;
		height: 170rpx;
		padding: 24rpx 32rpx;
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 20rpx 60rpx 0 rgba(112,136,210,0.1);
		display: flex;
		align-items: center;
	}

	.goods-line{
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.goods-image{
		width: 122rpx;
		height: 122rpx;
		margin-right: 24rpx;
		border-radius: 8rpx;
	}

	.item-goods-info{
		flex: 1;
	}

	.buy-btn{
		width: 164rpx;
		height: 56rpx;
		line-height: 56rpx;
		background: #EC585E;
		border-radius: 28rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		text-align: center;
	}

	.goods-name{
		width: 480rpx;
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #40434D;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-bottom: 24rpx;
	}

	.goods-price{
		font-size: 32rpx;
		font-family: Avenir-Medium, Avenir;
		font-weight: 500;
		color: #F84761;
	}
</style>
